<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门信息列表</title>
<!--    vue的核心库vue.0 渲染数据-->
<!--    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>-->
    <script src="js/vue2.js"></script>     <!--保存到本地加载比较快-->
<!--    axios库-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.js"></script>
    <style>
        #app table{
            border:solid 1px red;
            margin:0 auto;
            width:700px;
            font-size:20px;
            border-collapse:collapse;
        }
        tr,td{
            border:solid 1px red;
        }
    </style>
</head>
<body>
<div id="app">

    <div id="user">
        <input type="text" v-model="newDept.name"><br>
<!--        br换行-->
        <button @click="addDept">添加</button>
    </div>
    <table>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="dept in depts":key="dept.id">
            <td>{{dept.id}}</td>
            <td>{{dept.name}}</td>
            <td>{{dept.createTime}}</td>
            <td>{{dept.updateTime}}</td>
            <td>
                <button @click="deleteDept(dept.id)">删除</button>
                <button @click="updateDept(dept.id)">更新</button>
            </td>
<!--            td是单元格-->
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            newDept:{name:""},
            depts:[]//渲染的数据
        },
        mounted(){//生命周期，当前页面完整加载之后执行
           this.loadDepts();

        },
        methods:{
            //1.加载部门列表
            loadDepts(){
                axios.get('http://localhost:8080/selectAll').then(
                    response=>{
                        this.depts=response.data.data;//Javascript不加;也是可以的
                    }
                )
            },
            //2.删除方法，请求后端删除的api
            deleteDept(id){
                if(confirm("确认删除该条记录吗?")){
                    axios.delete(`http://localhost:8080/dept/${id}`).then(
                        ()=>this.loadDepts()//重新加载
                    )
                }
            },
            //3.请求后端的添加数据接口
            addDept()
            {
                if(this.newDept.name==''){
                    alert("未添加数据");
                    return;
                }
                axios.post("http://localhost:8080/insertInfo",this.newDept).then(
                    //箭头函数、回调函数
                    ()=>{
                        this.newDept.name="";
                        this.loadDepts();
                    }
                )
            },
            //4.修改数据接口
            updateDept(id){
                axios.get(`http://localhost:8080/getOne/${id}`).then(
                    response=>{
                        let a=response.data.data;
                        console.log(a);//把数据打印到浏览器控制台
                       let newName=prompt("请输入部门新名称",a.name);//输入框

                        //构造新的对象
                        let updateDept={
                            id:a.id,
                            name:newName,
                            createTime:a.createTime,
                            updateTime:new Date().toISOString()//前端获取时间的方式
                        }
                        //发送请求
                        axios.put("http://localhost:8080/updateDept",updateDept).then(
                            ()=>{
                                this.loadDepts();//刷新页面
                            }
                        )
                    }
                )
            }
        }
    })
</script>
</body>
</html>